/*
Blogger Template Style
Name     : DHARLA FERDANA
Designer : Dharla Ferdana
URL      : http://dharla-ferdana.blogspot.com
*/

@font-face {
  font-family:'Alike';
  font-style:normal;
  font-weight:400;
  src:local('Alike'),local('Alike-Regular'),url('http://themes.googleusercontent.com/static/fonts/alike/v4/0wlTTJEXU4hQ4azwPn6Wjw.woff') format('woff');
}

@font-face {
  font-family:'Ubuntu';
  font-style:italic;
  font-weight:400;
  src:local('Ubuntu Italic'),local('Ubuntu-Italic'),url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/kbP_6ONYVgE-bLa9ZRbvvvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:400;
  src:local('Ubuntu'),url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}

@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:700;
  src:local('Ubuntu Bold'),local('Ubuntu-Bold'),url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

/* Animation */
@-webkit-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-moz-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-ms-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-o-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@keyframes myfirst {0%{opacity:0}100%{opacity:1}}

@-webkit-keyframes updown {0%{top:0}100%{top:-5px}}
@-moz-keyframes updown {0%{top:0}100%{top:-5px}}
@-ms-keyframes updown {0%{top:0}100%{top:-5px}}
@-o-keyframes updown {0%{top:0}100%{top:-5px}}
@keyframes updown {0%{top:0}100%{top:-5px}}

::selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}

::-moz-selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}

/* General */
.hidden {display:none}

.accessible-hidden {
  position:absolute;
  top:-9999px;
  left:-9999px;
}

body {
  background-color:#bbb;
  text-align:center;
  font:normal normal .8125em/1.5 Ubuntu,"Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#333;
}

#out-shadow {
  position:relative;
  text-align:left;
  width:1250px;
  background-color:#ccc;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
  margin:23px auto 40px;
}

#out-shadow:after {
  content:"";
  display:table;
  clear:both;
}

/* Header */
#header-wrapper {
  background-color:#333;
  color:white;
  margin-bottom:1%;
  text-align:left;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
  padding:8px 0 18px;
}

#header {margin:0 15px}

#header h1 {
  font:normal 0/0 a;
  text-shadow:none;
  margin:0;
  padding:0;
}

#header a,
#header a:visited {color:white}

#header .description {
  font:normal normal 100%/1.5em Alike,Cambria,Georgia,Serif;
  color:#999;
  padding:5px 30px 0;
  margin:0 0;
}

#header-logo {
  position:relative;
  width:80px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}

#header-logo:hover {
  position:relative;
  width:330px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}

#header-logo span,
#header-logo span:before,
#header-logo span:after {
  content:"";
  position:absolute;
  display:block;
}

#header-logo .char-d {
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:0;
}

#header-logo:hover .char-d {
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:0;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-d:before {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-h {
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:25px;
  border-left:7px solid white;
  border-right:7px solid white;
}

#header-logo:hover .char-h {
  width:9px;
  top:0;
  bottom:0;
  left:25px;
  border-left:7px solid white;
  border-right:7px solid white;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);

  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-h:before {
  width:9px;
  height:0;
  top:14px;
  border-top:7px solid white;
  left:0px;
  right:0px;
}

#header-logo .char-a {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
}

#header-logo:hover .char-a {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:52px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-a:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-a:after {
  content:"";
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-r {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
  border-radius: 0px 4px 0 0;
  -moz-border-radius: 0px 4px 0 0;
  -webkit-border-radius: 0px 4px 0 0;
}

#header-logo:hover .char-r {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:79px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-r:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-r:after {
  content:"";
  border:3px solid transparent;
  top:10px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-l {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-right:none;
  border-top:none;
}

#header-logo:hover .char-l {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:106px;
  border:7px solid white;
  border-right:none;
  border-top:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-l:before {
  top:7px;
  left:0;
  width:9px;
}

#header-logo .char-a1 {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
}

#header-logo:hover .char-a1 {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:126px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-a1:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-a1:after {
  content:"";
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .strip {
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:45px;
  border:7px solid transparent;
}

#header-logo:hover .strip {
  width:9px;
  top:0;
  bottom:0;
  left:146px;
  border:7px solid transparent;
}

#header-logo .strip:before {
  width:7px;
  height:0;
  top:8px;
  border-top:7px solid red;
  left:0px;
  right:0px;
}

#header-logo:hover .strip:before{
  left:0px;
  width:7px;
  height:0;
  top:8px;
  border-top:7px solid yellow;
  right:0px;
}

#header-logo .char-f {
  width:9px;
  top:0;
  bottom:0;
  left:63px;
  border:7px solid white;
  border-right:none;
  border-bottom:none;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

#header-logo:hover .char-f {
  width:9px;
  top:0;
  bottom:0;
  left:164px;
  border:7px solid white;
  border-right:none;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-f:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-e {
  opacity:0;
  width:7px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-right:none;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

#header-logo:hover .char-e {
  opacity:1;
  width:7px;
  top:0;
  bottom:0;
  left:184px;
  border:7px solid white;
  border-right:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-e:before {
  top:7px;
  left:0;
  width:7px;
  border-top:7px solid white;
}

#header-logo .char-r1 {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
  border-radius: 0px 4px 0 0;
  -moz-border-radius: 0px 4px 0 0;
  -webkit-border-radius: 0px 4px 0 0;
}

#header-logo:hover .char-r1 {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:202px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-r1:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-r1:after {
  content:"";
  border:3px solid transparent;
  top:10px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-d1 {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:0;
}

#header-logo:hover .char-d1 {
  opacity:1;
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:229px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-d1:before {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-a2 {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
}

#header-logo:hover .char-a2 {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:254px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-a2:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-a2:after {
  content:"";
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-n {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border-left:7px solid white;
  border-right:7px solid white;
}

#header-logo:hover .char-n {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:281px;
  border-left:7px solid white;
  border-right:7px solid white;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-n:before {
  width:20px;
  height:0;
  top:12px;
  border-top:7px solid white;
  left:-5px;
  right:0px;
  transform:rotate(40deg);
  -ms-transform:rotate(40deg);
  -moz-transform:rotate(40deg);
  -webkit-transform:rotate(40deg);
  -o-transform:rotate(40deg);
}

#header-logo .char-a3 {
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  width:9px;
  top:0;
  bottom:0;
  left:0;
  border:7px solid white;
  border-bottom:none;
}

#header-logo:hover .char-a3 {
  opacity:1;
  width:9px;
  top:0;
  bottom:0;
  left:308px;
  border:7px solid white;
  border-bottom:none;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo .char-a3:before {
  top:7px;
  left:0;
  width:9px;
  border-top:7px solid white;
}

#header-logo .char-a3:after {
  content:"";
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-symb {
  opacity:0;
  left:10px;
  width:5px;
  top:0;
  bottom:0;
  right:0;
  border:7px solid white;
  border-left:none;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

#header-logo .char-symb:before {
  border:7px solid #5498C9;
  border-width:7px 0;
  width:7px;
  top:0;
  bottom:0;
  left:-10px;
}

#header-logo .char-symb:after {
  width:8px;
  border:8px solid #333;
  border-width:0 0;
  top:-10px;
  right:-8px;
  bottom:-10px;
}

#header-logo:hover .char-symb {
  opacity:1;
  left:345px;
  -webkit-transform:rotate(450deg) translateX(7px);
  -moz-transform:rotate(450deg) translateX(7px);
  -ms-transform:rotate(450deg) translateX(7px);
  -o-transform:rotate(450deg) translateX(7px);
  transform:rotate(450deg) translateX(7px);
  width:14px;
  margin-right:-7px;
  border-color:#ED1C24;
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo:hover .char-symb:after {border-width:10px 0}

#header-logo:hover .char-symb:before {
  border-color:#ED1C24;
  left:-12px;
}

/* Main Nav */
#main-nav {background-color:#333}

#main-nav ul,
#main-nav li {
  margin:0;
  padding:0;
  list-style:none;
  height:35px;
}

#main-nav li {
  float:left;
  display:inline;
  position:relative;
  height:auto;
}

#main-nav a {
  display:block;
  line-height:35px;
  border-left:1px solid #444;
  border-right:1px solid #222;
  color:#aaa;
  text-decoration:none;
  padding:0 1.8em;
}

#main-nav li.depan a {border-left:none}

#main-nav li ul {
  background-color:#333;
  border:0;
  position:absolute;
  top:100%;
  left:0;
  width:225px;
  height:auto;
  z-index:88;
  -webkit-box-shadow:0 1px 5px #222;
  -moz-box-shadow:0 1px 5px #222;
  box-shadow:0 1px 5px #222;
  display:none;
}

#main-nav li li {
  float:none;
  display:block;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}

#main-nav li ul a {
  height:33px;
  line-height:33px;
  padding:0 .8em 0 1.2em;
  font-size:96%;
}

#main-nav li a:hover,
#main-nav li:hover > a {color:#666}

#main-nav li:hover ul.hidden {display:block}

/* Search Form */
#cse-search-box {
  position:absolute;
  top:15px;
  right:17px;
  z-index:10;
  vertical-align:top;
  text-align:right;
  width:165px;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

input.search-field,
input.black {
  background-color:#444 !important;
  color:#f10c0c;
  width:145px;
  text-align:left;
  -webkit-box-shadow:inset 0 0 2px #333;
  -moz-box-shadow:inset 0 0 2px #333;
  box-shadow:inset 0 0 2px #333;
  border:1px solid #444;
  border-color:#222 #444 #444 #222;
  padding:1px 2px;
}

input.search-field:focus {
  width:160px;
  color:white;
  background-color:#F3A01E !important;
  -webkit-box-shadow:0 0 2px white,0 0 30px white;
  -moz-box-shadow:0 0 2px white,0 0 30px white;
  box-shadow:0 0 2px white,0 0 30px white;
  border-color:white !important;
}

/* Main Column */
#main-wrapper {
  margin:0 0 0 1%;
  width:67%;
  float:left;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  background-color:white;
  background-image:-webkit-linear-gradient(top,#dedede,white 100px);
  background-image:-moz-linear-gradient(top,#dedede,white 100px);
  background-image:-ms-linear-gradient(top,#dedede,white 100px);
  background-image:-o-linear-gradient(top,#dedede,white 100px);
  background-image:linear-gradient(top,#dedede,white 100px);
  border:2px solid #888;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:10px 0;
}

/* Sidebar */
.sidebar ul {
  list-style:none;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  margin:0 0 1.25em;
  padding:0;
}

.sidebar ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  margin:0;
  padding:3px 10px;
}

.sidebar p {margin:0 0 .6em}

#sidebar-wrapper {
  margin:0 1% 10px 0;
  width:28.8%;
  float:right;
  text-align:left;
  background-color:#333;
  font-size:99%;
  border:4px solid #ddd;
  color:#666;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  position:relative;
  right:-2px;
  padding:0;
}

#sidebar-wrapper .widget {
  font-size:97%;
  margin:0;
}

#sidebar-wrapper .widget-content {
  margin:0;
  padding:10px;
}

#sidebar-wrapper h2 {
  cursor:pointer;
  text-shadow:0 1px 0 black;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#333,#3c3c3c);
  background-image:-moz-linear-gradient(top,#333,#3c3c3c);
  background-image:-ms-linear-gradient(top,#333,#3c3c3c);
  background-image:-o-linear-gradient(top,#333,#3c3c3c);
  background-image:linear-gradient(top,#333,#3c3c3c);
  border:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  font:normal bold 100%/28px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#bbb;
  text-transform:uppercase;
  height:28px;
  padding:0 .8em;
  margin:0;
}

#sidebar-wrapper h2.active {
  background-image:-webkit-linear-gradient(top,#3c3c3c,#333);
  background-image:-moz-linear-gradient(top,#3c3c3c,#333);
  background-image:-ms-linear-gradient(top,#3c3c3c,#333);
  background-image:-o-linear-gradient(top,#3c3c3c,#333);
  background-image:linear-gradient(top,#3c3c3c,#333);
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  border-color:#555 transparent #222;
}

#sidebar-wrapper a {
  color:#999;
  text-decoration:none;
  text-shadow:0 1px 0 black;
}

#sidebar-wrapper a:visited {color:#555}

#sidebar-wrapper a:hover,
#sidebar-wrapper a:visited:hover {
  color:white;
  text-decoration:none;
}

#loading-text {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}

#loading-text span {
  display:inline;
  background-color:#900;
  padding:5px 10px 7px;
  font:bold 11px/24px Arial,Sans-Serif;
  color:white;
}

#loading-text .notif-count {
  display:block;
  position:absolute;
  top:0;
  left:50%;
  width:66px;
  height:17px;
  overflow:hidden;
  background-color:#900;
  padding:1px 0 0;
  font:normal bold 8px/15px Tahoma,Verdana,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  margin:3px auto 0 -33px;
}

#alert-box {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}

#alert-box .message {
  text-align:left;
  width:370px;
  margin:0 auto;
  background-color:#174A87;
  border:10px solid #0A2E58;
  color:white;
  padding:1.2em 1.4em;
  -webkit-box-shadow:0 0 2px 1px black,0 0 10px black;
  -moz-box-shadow:0 0 2px 1px black,0 0 10px black;
  box-shadow:0 0 2px 1px black,0 0 10px black;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#alert-box .button-group {margin:1.7em 0 0}

#alert-box button {
  border:none;
  margin:0 2px;
}

.jsfiddle-demo {
  display:block;
  width:99%;
  height:300px;
  border:2px solid #4474A5;
  margin:0 auto 1.7em;
}

/* Footer */
#main-footer {
  font-family:Alike,Cambria,Georgia,Serif;
  color:#999;
  background-color:#333;
  margin-top:1%;
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
  padding:15px 15px 8px;
}

#main-footer a:link,
#main-footer a:visited {color:white}

#main-footer .blog-dir {
  opacity:0;
  overflow:hidden;
  -webkit-transition:opacity .4s ease-out;
  -moz-transition:opacity .4s ease-out;
  -ms-transition:opacity .4s ease-out;
  -o-transition:opacity .4s ease-out;
  transition:opacity .4s ease-out;
}

#main-footer:hover .blog-dir {opacity:1}
#main-footer .copyright {overflow:hidden}

/* In loading... */
#main-wrapper {
  -webkit-animation:myfirst 1s;
  -moz-animation:myfirst 1s;
  -ms-animation:myfirst 1s;
  -o-animation:myfirst 1s;
  animation:myfirst 1s;
}

h2,h3,#sidebar-wrapper,#ad-wrapper {
  -webkit-animation:myfirst 2s;
  -moz-animation:myfirst 2s;
  -ms-animation:myfirst 2s;
  -o-animation:myfirst 2s;
  animation:myfirst 2s;
}

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#010101;
  z-index:9999;
  text-align:center;
  padding:70px 0 0;
  display:none;
}

/* Contact Frame */
#contact-frame {
  width:560px;
  height:360px;
  border:none;
  background-color:#333;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  overflow:hidden;
  position:absolute;
  top:100px;
  left:50%;
  z-index:9999;
  margin:0 0 0 -280px;
}

#contact-close {
  position:absolute;
  line-height:normal;
  top:105px;
  left:50%;
  margin:0 0 0 -268px;
  border:none;
  z-index:99999;
  text-decoration:none;
  font-weight:bold;
  font-size:150%;
  color:white;
}

/* Status Panel */
#status {
  position:absolute;
  top:54px;
  left:-4px;
  z-index:8;
  cursor:help;
  background-color:#DC4236;
  font-size:96%;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  text-align:right;
  padding:7px 12px 7px 10px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  -webkit-transition:top .5s ease-in-out;
  -moz-transition:top .5s ease-in-out;
  -ms-transition:top .5s ease-in-out;
  -o-transition:top .5s ease-in-out;
  transition:top .5s ease-in-out;
  overflow:hidden;
  display:none;
}

#status a {color:#ffa}

#status strong {
  cursor:pointer;
  float:right;
  width:16px;
  height:16px;
  font-size:78%;
  line-height:16px;
  text-align:center;
  background-color:#8B271F;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}

#status h2 {
  font-size:110%;
  color:inherit;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  margin:0 0 10px;
  padding:5px 10px;
}

#status .section {
  position:relative;
  top:-12px;
  left:-10px;
  margin:0 10px 0;
  padding:0 0;
  width:300px;
  height:300px;
  text-align:left;
  display:none;
}

#status .widget,
#status .widget-content {
  width:auto;
  margin:0 0;
  padding:0 0;
}

#status:hover strong {
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}

/* 'Top' Link */
#gotop {
  cursor:pointer;
  position:fixed !important;
  position:absolute;
  bottom:-40px;
  right:-40px;
  z-index:999;
  width:30px;
  height:30px;
  background-color:#067BAF;
  border:1px solid #144F69;
  overflow:hidden;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-border-radius:10px 0 0 0;
  -moz-border-radius:10px 0 0 0;
  border-radius:10px 0 0 0;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
}

#gotop:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border-width:10px 4px;
  border-style:solid;
  border-color:transparent transparent #C3D1D7 transparent;
  position:absolute;
  top:0;
  left:11px;
}

#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}

#gotop:active {
  background-image:-webkit-linear-gradient(top,#144F69,#2493C4);
  background-image:-moz-linear-gradient(top,#144F69,#2493C4);
  background-image:-ms-linear-gradient(top,#144F69,#2493C4);
  background-image:-o-linear-gradient(top,#144F69,#2493C4);
  background-image:linear-gradient(top,#144F69,#2493C4);
}

/* Tooltip search */
.tt-search {
  display:none;
  border:1px solid black;
  background-color:white;
  padding:5px 7px;
  position:absolute;
  z-index:99999;
  text-align:left;
  margin:30px 0 0 50px;
}

.tt-search .anchor {
  font-size:90%;
  font-family:Arial,Sans-Serif;
  line-height:normal;
  display:block;
  color:#4A87B8;
  cursor:pointer;
}

.tt-search .anchor:hover {text-decoration:underline}

/* Media Queries */
@media (max-width:1250px) {
	#out-shadow {width:100%}
}

@media (max-width:1024px) {
	#out-shadow {
	  width:auto;
	  margin-left:.5%;
	  margin-right:.5%;
	}
	#top-ribbon {right:24%}
}

@media (max-width:860px) {
	body {
	  -webkit-animation:myfirst .5s;
	  -moz-animation:myfirst .5s;
	  -ms-animation:myfirst .5s;
	  -o-animation:myfirst .5s;
	  animation:myfirst .5s;
	  overflow-x:hidden !important;
	}
	#main-wrapper,
	#about .col.float-left,
	#about .col.float-right {
	  float:none;
	  display:block;
	  width:auto;
	  height:auto;
	  margin:0 1% 1.5em;
	}
	#sidebar-wrapper,
	#ad-wrapper {margin:0 1% 1%}
	#sidebar-wrapper {
	  float:left;
	  display:inline;
	  width:46%;
	  height:auto;
	  right:0;
	}
	#ad-wrapper {
	  float:none;
	  display:block;
	  width:auto;
	  margin:2% 1.5%;
	  padding:5px;
	}
	#ad-1 {margin:0}
	.sidebar-box {
	  display:inline;
	  float:right;
	  width:48%;
	  margin:0 1% 10px 0;
	  border:4px solid #ddd;
	}
	.breadcrumb .kanan {display:none}
	#top-ribbon {right:-140px}
	#header-wrapper h1 {
	  display:block;
	  font-size:25px;
	}
	#ad-banner-wrapper {
	  text-align:center;
	  margin:0 0;
	}
	img.ad-banner {
	  margin:0 0;
	  width:auto;
	  max-width:92.88%;
	}
	.addthis_toolbox {
	  clear:both;
	  width:96%;
	  height:24px;
	  margin:7px 2% 5px;
	}
	.addthis_toolbox a.subscribe {
	  float:right;
	  clear:right;
	  top:0;
	  padding:3px 7px;
	  line-height:normal;
	}
	#subscribe-form {width:190px}
	#subscribe-form input.email-input {width:150px}
}

@media (max-width:580px) {
	html {-webkit-text-size-adjust:none}
	#out-shadow {
	  width:auto;
	  margin:0 0 40px 0;
	}
	#header-wrapper {
	  min-height:20px;
	  height:auto !important;
	  height:20px;
	}
	#status {
	  position:fixed !important;
	  position:absolute;
	  top:4px;
	  z-index:1200;
	}
	#cse-search-box {
	  position:fixed !important;
	  position:absolute;
	  height:auto;
	  background-color:#333;
	  width:auto;
	  top:0;
	  right:0;
	  left:0;
	  z-index:1000;
	  padding:9px 3% 10px;
	  border-bottom:2px solid #aaa;
	  -webkit-box-shadow:0 0 5px black;
	  -moz-box-shadow:0 0 5px black;
	  box-shadow:0 0 5px black;
	}
	input.search-field {margin:0}
	.post-outer {
	  display:block;
	  float:none;
	  width:auto;
	}
	.post {
	  -webkit-box-shadow:none;
	  -moz-box-shadow:none;
	  box-shadow:none;
	}
	#top-ribbon {margin-top:42px}
	#main-nav li,
	#sidebar-wrapper,
	#ad-wrapper,
	.sidebar-box,
	#ad-bottom .container.float-left,
	#ad-bottom .container.float-right {
	  float:none;
	  display:block;
	  width:auto;
	}
	#ad-bottom .container.float-left,
	#ad-bottom .container.float-right {
	  padding:4%;
	  margin:0;
	}
	#ad-bottom .container.float-left {margin-bottom:1em}
	#main-nav,
	#main-nav ul {height:auto}
	#main-nav {padding-bottom:2px}
	.ad-banner-5 {display:none}
	#main-nav li {
	  border-top:1px solid #444;
	  border-bottom:1px solid #222;
	  padding:0;
	}
	#main-nav li a {
	  padding:0 1.2em;
	  border:none;
	}
	#main-nav > ul > li.drop-down:after {
	  content:"+";
	  font:normal bold 20px/31px Verdana,Tahoma,Arial,Sans-Serif;
	  color:#666;
	  display:block;
	  position:absolute;
	  top:0;
	  right:.7em;
	  letter-spacing:-3px;
	}
	#main-nav > ul > li.drop-down.active:after {content:"--"}
	#main-nav li ul {
	  position:static;
	  width:auto;
	}
	#main-nav li ul li,
	#main-nav li ul li a {border:none}
	#main-nav li ul li a {
	  border-top:1px solid #3c3c3c;
	  background-color:#222;
	}
	#main-nav li ul li a:active {
	  background-color:white;
	  color:inherit;
	}
	.sidebar-box {margin:10px 1% 0}
	.alignleft,
	.alignright,
	.align-left,
	.align-right {
	  float:none;
	  display:block;
	  margin:0 0 1.7em;
	  text-align:center;
	}
	.post-body img,
	#comments iframe.video {max-width:90%}
	#main-nav li .float-right,
	#header-wrapper h1,
	#header-wrapper .description,
	#header-logo,
	.breadcrumb,
	.reaction-button,
	.post-body ins#aswift_0_anchor,
	.inline-ad .snippet-outer {display:none}
	.item .addthis_toolbox {
	  background-color:#eee;
	  border-top:1px dotted #bbb;
	  padding:12px 10px 4px;
	  margin:5px auto 0;
	}
	img.ad-banner {width:90%}
	.static_page #main-nav {border-bottom:none}
	.cm_head {
	  width:auto;
	  height:50px;
	  margin:0 55px 0 0;
	  position:relative;
	}
	.cm_head a.answer-this-comment,
	.cm_head a.comment-delete {
	  float:left;
	  margin:0 0 10px 10px;
	  padding:.7em 1em;
	  font:inherit;
	  -webkit-border-radius:2px;
	  -moz-border-radius:2px;
	  border-radius:2px;
	}
	.cm_head .avatar-image-container {
	  position:absolute;
	  top:-10px;
	  left:100%;
	}
	.cm_entry {margin:0 0 30px 0}
	#comment-form {margin-top:0}
	.cm_wrap #comment-form {margin-bottom:30px}
	#respond a.button {
	  display:block;
	  margin:0 0 4px;
	  padding:.7em 1.2em;
	}
	#status-forum li {
	  white-space:nowrap;
	  overflow:hidden;
	  text-overflow:ellipsis;
	}
}

.clear {clear:both}
